<template>
    <div class="admin-content">
        <div class="am-cf am-padding">
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">广告分类</strong> /
                <small>Ad Categories Manage</small>
            </div>
        </div>


        <div class="am-g">
            <div class="am-u-sm-12 am-u-md-6">
                <div class="am-btn-toolbar">
                    <div class="am-btn-group am-btn-group-xs">
                        <a v-link="{ name: 'category_create' }" :class="am-btn am-btn-default">
                            <span class="am-icon-plus"></span> 新增
                        </a>
                    </div>
                </div>
            </div>
        </div>

        <div class="am-g">
            <div class="am-u-sm-12">
                <form class="am-form">
                    <table class="am-table am-table-striped am-table-hover table-main">
                        <thead>
                        <tr>
                            <th class="table-id">编号</th>
                            <th>缩略图</th>
                            <th class="table-name">分类名</th>
                            <th class="table-sort-order am-hide-sm-only" style="width:10%">排序</th>
                            <th class="table-set">操作</th>
                        </tr>
                        </thead>
                        <tbody>

                        <tr v-for="category in categories | orderBy 'sort_order' ">
                            <td>{{category.id}}</td>
                            <td><img :src="category.thumb"></td>
                            <td>{{category.name}}</td>
                            <td class="am-hide-sm-only">{{category.sort_order}}</td>
                            <td>
                                <div class="am-btn-toolbar">
                                    <div class="am-btn-group am-btn-group-xs">

                                        <a v-link="{ name: 'category_edit', params: { category_id: category.id }, activeClass:'am-btn am-btn-default' }">
                                            <span class="am-icon-plus"></span> 编辑
                                        </a>

                                        <button class="am-btn am-btn-default am-btn-xs am-hide-sm-only">
                                            <span class="am-icon-copy"></span> 复制
                                        </button>
                                        <button class="am-btn am-btn-default am-btn-xs am-text-danger am-hide-sm-only" @click="delete_category(category)">
                                            <span class="am-icon-trash-o"></span> 删除
                                        </button>
                                    </div>
                                </div>
                            </td>
                        </tr>

                        </tbody>
                    </table>

                </form>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        ready() {
            this.$http.get('/lxSystem/ad_category').then((response) => {
                this.categories = response.json();
            });
        },
        data: function () {
            return {
                categories: []
            }
        },
        methods: {
            delete_category: function (category) {
                var category_id = category.id;
                //写一个$http请求

                this.categories.$remove(category);
            }
        }
    }
</script>
